﻿@page "/appearance-toggle"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    AppearanceToggle
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Radzen Blazor <strong>AppearanceToggle</strong> is a button that allows the end user to toggle the application appearance between two preset themes.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    This demo shows a toggle button that switches between light and dark themes using <code>RadzenAppearanceToggle</code> with <code>RadzenTheme</code>, providing users with instant appearance customization.
</RadzenText>

<RadzenText Anchor="appearance-toggle#light-dark-mode" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Switch between light and dark mode
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use RadzenAppearanceToggle to switch between light and dark modes. Requires RadzenTheme (check the <RadzenLink Path="/get-started" Text="getting started instructions" />).
</RadzenText>
<RadzenExample ComponentName="AppearanceToggle" Example="AppearanceToggleConfig">
    <AppearanceToggleConfig />
</RadzenExample>

<RadzenRow>
    <RadzenColumn Size="12">
        <RadzenText Anchor="appearance-toggle#video-radzen-blazor-studio-config" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
            RadzenAppearanceToggle in Radzen Blazor Studio
        </RadzenText>
        <RadzenText TextStyle="TextStyle.Subtitle1" class="rz-mb-6">
            Learn how to add and configure this built-in component
        </RadzenText>
    <RadzenCard Variant="Variant.Outlined" class="rz-p-7">
        <div class="embed-container">
            <iframe src="https://www.youtube.com/embed/uKY2YpUITu4?&rel=0" frameborder="0" allowfullscreen=""></iframe>
        </div>
    </RadzenCard>
    </RadzenColumn>
</RadzenRow>

<RadzenText Anchor="toggle-button#keyboard-navigation" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Keyboard Navigation
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor AppearanceToggle component.
</RadzenText>

<KeyboardNavigationDataGrid Data="@shortcuts" />

@code {
    public List<KeyboardShortcut> shortcuts = new()
    {
        new KeyboardShortcut { Key = "Tab", Action = "Navigate to the AppearanceToggle." },
        new KeyboardShortcut { Key = "Enter", Action = "Click and toggle the focused AppearanceToggle." },
        new KeyboardShortcut { Key = "Space", Action = "Click and toggle the focused AppearanceToggle." }
    };
}
